<template>
    <div class="container">
        <div class="heade">
            <div class="header">
                <span class="text1">筛选查询</span>
                <!-- 收起筛选/展开筛选 -->
                <span class="text4" @click="isShow = !isShow">
                    <i class="el-icon-arrow-down" v-if="!isShow">展开筛选</i>
                    <i class="el-icon-arrow-up" v-if="isShow">收起筛选</i>
                </span>
                <button type="success" class="info" @click="queryAll">查询结果</button>
            </div>
            <!-- 以下div为筛选查询 -->
            <div class="heade-text" v-show="isShow">
                <el-form ref="form" :model="form" label-width="100px" class="heade-form">
                    <el-form-item label="输入搜索:">
                        <el-input v-model="form.name" placeholder="商品名称" style="width: 200px;"></el-input>
                    </el-form-item>
                    <el-form-item label="商品类型:">
                        <el-input v-model="form.goodsType" placeholder="请输入商品类型" style="width: 200px;"></el-input>
                    </el-form-item>
                    <el-form-item label="商品品牌:">
                        <el-input v-model="form.brand" placeholder="请输入商品品牌" style="width: 200px;"></el-input>
                    </el-form-item>
                    <el-form-item label="状态:">
                        <el-select v-model="value" clearable placeholder="请选择">
                            <el-option v-for="item in options" :key="item.value" 
                            :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div class="between">
            <div class="header">
                <span class="text">数据列表</span>
                <el-button type="button" class="info1"><router-link to="/addproduct">添加</router-link></el-button>
                
                <button type="success" class="info">导出</button>
            </div>
            <div class="between-table">
                <el-table :header-cell-style="{ fontSize: '14px', textAlign: 'center' }"
                    :cell-style="{ fontSize: '12px', textAlign: 'center' }" ref="multipleTable" :data="tableData" border
                    tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
                    <el-table-column prop="id" label="编号"></el-table-column>
                    <el-table-column prop="name" label="商品名称"></el-table-column>
                    <el-table-column prop="price" label="成本价格"></el-table-column>
                    <el-table-column prop="vendor" label="厂商名称"></el-table-column>
                    <el-table-column prop="brand" label="品牌名称"></el-table-column>
                    <el-table-column prop="goodsType" label="商品类型"></el-table-column>
                    <el-table-column label="状态">
                        <template slot-scope="scope">
                            <!--  @change="changeStatus(scope.row)" -->
                            <el-switch v-model="scope.row.status==1" @change="changeStatus(scope.row)"></el-switch>
                        </template>
                    </el-table-column>
                </el-table>
                <div style="margin-top: 20px; display: flex; ">
                    <div class="block">
                        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                            :current-page.sync="currentPage3" :page-size="2" layout="prev, pager, next, jumper"
                            :total="clientList.length"
                            style="margin-left: 0px; margin-top: 20px; display: flex; justify-content: flex-end; width: 100%; margin-right: 20px;" background>
                        </el-pagination>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import {updateStatus,queryGoods} from '@/api/goods.js'
export default {
    data() {
        return {
            isShow: true,
            form: {
                name: '',
                goodsType: '',
                brand: '',
                // status:''
            },
            clientList: [],
            tableData: [],
            multipleSelection: [],
            options: [{
                value: '1',
                label: '启用'
                }, {
                value: '0',
                label: '禁用'
            }],
            value:''
        }
    },
    created() {
        this.form.brand=this.$route.query.data;
        console.log(this.$route.query.data);
        this.queryAll();
    },
    methods: {
        queryAll(){
            queryGoods(this.form.name,this.form.goodsType,this.form.brand,this.value).then(
                response=>{
                    if(response.data.code==0){
                        this.tableData=response.data.data;
                        this.form.brand=''
                        this.form.goodsType=''
                        this.form.name=''
                        this.form.status=''
                    }else{
                        alert(response.data.msg);
                    }
                }
            )
        },
        changeStatus(row) {
            row.status = row.status === 1 ? 0 : 1; // 切换status的值
            // updateStatus(row.id,row.status).then(
            //     response=>{
            //         if(response.data.code==0){
            //             this.queryAll();
            //         }else{
            //             alert(response.data.msg);
            //         }
            //     }
            // )
        },
    },
}

</script>

<style scoped>
.heade-text {
    border: 1px solid rgba(228, 228, 228, 1);
    text-align: center;
}

.heade-form {
    display: flex;
    position: relative;
    top: 12px;
}

.text1 {
    font-size: 14px;
    position: absolute;
    left: 12px;
}

.text2 {
    font-size: 12px;
    position: absolute;
    left: 100px;
    color: red;
}

.text3 {
    font-size: 12px;
    position: absolute;
    left: 180px;
    color: red;
}

.text4 {
    font-size: 12px;
    position: absolute;
    right: 140px;
    cursor: pointer;
}

.info1 {
    position: absolute;
    right: 120px;
    top: 12px;
    border: 1px solid rgba(228, 228, 228, 1) !important;
    width: 80px;
    height: 30px;
    line-height: 7px;
    background-color: rgb(255, 255, 255);
    cursor: pointer;
    margin: -2px 0px;
}

.info {
    position: absolute;
    right: 12px;
    top: 12px;
    border: 1px solid rgba(228, 228, 228, 1) !important;
    width: 80px;
    height: 30px;
    line-height: 30px;
    background-color: rgb(255, 255, 255);
    cursor: pointer;
    margin: -2px 0px;
    border-radius: 4px;
}

.info:hover {
    background-color: rgb(220, 238, 255);
    color: rgb(24, 144, 255);
}

.info1:hover {
    background-color: rgb(220, 238, 255);
    color: rgb(24, 144, 255);
}

.header {
    position: relative;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: rgba(243, 243, 243, 1);
    border: 1px solid rgba(228, 228, 228, 1);
}

.between .header {
    margin-top: 20px;
}

.column {
    font-size: 12px;
    margin-right: 5px;
}
</style>